<template>
  <n-scrollbar x-scrollable style="max-height: 100vh">
  <CommonPage show-footer style="padding: 0px;background-color: white">
    <div class="w-full f-c-c"  style="background-color: white;">

      <div style="margin-top: 15px" class="max-w-900 w-full">
        <div style="margin-left: -135px;margin-bottom: 130px">

        </div>
        <n-form ref="formRef"
                :model="formValue"
                :rules="rules"
                label-placement="left"
                label-align="right"
                label-width="100px"
                class="mt-20 flex flex-col px-15">
          <n-form-item label="用户名:" path="username">
            <n-input v-model:value="formValue.username" placeholder="请输入用户名"></n-input>
          </n-form-item>
            <n-form-item label="电话:" path="phone">
                <n-input v-model:value="formValue.phone" placeholder="请输入电话"></n-input>

            </n-form-item>
          <n-form-item label="验证码:" path="number">
            <n-input v-model:value="formValue.number" placeholder="请输入验证码"></n-input>
          </n-form-item>
            <n-form-item >
                <n-button type="primary" @click="getNumber" style="margin-left: 47%">发送验证码</n-button>
            </n-form-item>

          <n-form-item>

            <n-button type="primary" @click="submitForm" style="margin-left: 45%">确认</n-button>
            <n-button type="primary" @click="cancel" style="margin-left: 25px">取消</n-button>
          </n-form-item>
        </n-form>
      </div>
    </div>
  </CommonPage>
  </n-scrollbar>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import api from '@/api/admin'

const router = useRouter()
const { account } = history.state

const formRef = ref(null)
const formValue = ref({
  username:'',
  phone: '',
  number: '',
})

const rules = ref({
  phone: {
    key: 'phone',
    required: true,
    trigger: 'blur',
    validator: async (rule, value) => {
      if (!value) {
        return Promise.reject(new Error('电话不能为空'))
      }
      console.log('trigger by validate')
      try {
        const res = await api.findAdminuserByAccountInRePwInfo({ account: value })
        const { question } = res.data
        console.log(formValue.value.question)
        if (question) {
          formValue.value.question = question
          return
        }
        return Promise.reject(new Error('无用户，请注册'))
      } catch (err) {
        return Promise.reject(new Error(err.message))
      }
    },
  },
    number: [
        {
            required: true,
            trigger: 'blur',
            message: '验证码不能为空',
        },
    ],

})
const getNumber=()=>{

}
const submitForm = (e) => {
  e.preventDefault()
  $message.loading('验证中')
  const { account, answer } = formValue.value
  formRef.value?.validate((errors) => {
    if (!errors) {
      api.confirmQuestionAnswer({
            account: account,
            answer: answer,
          })
          .then(() => {
            $message.success('验证成功')
            router.push({
              name: 'AdminResetPassword',
              query: { account: account },
              state: { canAccessResetPassword: 'true' },
            })
          })
          .catch(() => {})
    } else {
      $message.error('表单验证失败')
      console.log('errors', errors)
    }
  })
}
const cancel=()=>{
  router.push({name:'AdminLogin'})
}
onMounted(() => {
  if (formValue.value.account) {
    console.log('run')
    formRef.value?.validate(
        (errors) => {
          if (errors) {
            console.error(errors)
          } else {
            console.log('yes')
          }
        },
        (rule) => {
          return rule?.key === 'account'
        }
    )
  }
})
</script>
